<template>
	<view class="content">
		<u-navbar title="企业福利"></u-navbar>
		<view class="content_tips">
			您最多可以添加10个企业福利，还可以添加自定义标签哦
		</view>
		<view class="u-m-t-32">
			<view class="" style="display: flex;flex-wrap: wrap;">
				<view class="u-m-r-20 u-m-b-20" v-for="item in data.list">
					<u-tag shape="circle" :text="item.name" :type="item.check?'primary':'info'"
						@click="handleClick(item)"></u-tag>
				</view>
			</view>
			<view><u-tag @click="handleCustom" :plus="true" text="自定义" type="primary" shape="circle" /></view>
		</view>
		<u-modal v-model="data.showCustom" title="添加自定义标签" confirmText="确定" showCancelButton @confirm="confirm">
			<template v-slot:default>
				<view class="u-p-30">
					<u-input border placeholder="请输入标签内容（最多五个字）" v-model="data.customVal" maxlength="5"></u-input>

				</view>
			</template>
		</u-modal>
		<u-bottom-button confirmText="保存" @confirm="submit"></u-bottom-button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const data = reactive({
		list: [],
		selectedTags: [],
		showCustom: false,
		customVal: ''
	})
	onLoad(({
		selectedTags
	}) => {
		if (selectedTags != '[]') {
			data.selectedTags = JSON.parse(selectedTags)
		}
		getClassifyInfo()
	})
	// 添加自定义标签
	const confirm = () => {
		if (uni.$u.test.isEmpty(data.customVal)) {
			data.showCustom = true
			uni.$u.toast('自定义标签不能为空')
			return
		}
		data.list.push({
			id: '',
			name: data.customVal,
			check: true
		})
		syncSelectedTag()
	}
	// 打开自定义标签弹框
	const handleCustom = () => {
		// 判断选中企业福利的数量
		if (data.selectedTags.length >= 10) {
			uni.$u.toast('您最多可以选择10个企业福利')
		} else {
			data.showCustom = true
		}
	}
	// 同步已选中标签
	const syncSelectedTag = () => {
		data.selectedTags = data.list.filter(
			item => item.check
		)
	}
	const handleClick = (val) => {
		let thisIndex = 0
		// 判断是否是自定义标签
		if (val.id) {
			thisIndex = data.list.findIndex(
				item => parseInt(item.id) === parseInt(val.id)
			)
		} else {
			thisIndex = data.list.findIndex(item => item.name === val.name)
		}
		if (data.list[thisIndex].check) {
			data.list[thisIndex].check = false
		} else {
			// 判断选中企业福利的数量
			if (data.selectedTags.length >= 10) {
				uni.$u.toast('您最多可以选择10个企业福利')
			} else {
				data.list[thisIndex].check = true
			}
		}
		syncSelectedTag()
	}
	const submit = async () => {
		let tagIdArr = []
		let tagTextArr = []
		if (data.selectedTags.length == 0) return uni.$u.toast('请至少选择1个企业福利')
		data.selectedTags.forEach(function(item) {
			tagTextArr.push(item.name)
			if (item.id) {
				tagIdArr.push(item.id)
			} else {
				tagIdArr.push(item.name)
			}
		})
		uni.$emit('handlerCloseTag', {
			selectedTags: data.selectedTags,
			tagIdArr,
			tagTextArr
		})
		uni.$u.route({
			type: 'back'
		})
	}
	// 获取企业福利列表信息
	const getClassifyInfo = async () => {
		let params = {
			type: 'jobTag'
		}
		let res = await uni.$u.api.getClassifyInfo({
			params
		})
		data.list = res.map(item => {
			return {
				...item,
				check: false
			}
		})
		if (data.selectedTags.length > 0) {
			data.selectedTags.forEach(item => {
				data.list.forEach(items => {
					if (item.id == items.id) {
						items.check = true
					}
				})
				// 恢复自定义标签
				// 自定义标签无id
				if (!parseInt(item.id)) {
					data.list.push(item)
				}
			})
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 26rpx 32rpx;

		:deep(.u-mode-light-primary) {
			background-color: transparent;
			color: #00D075 !important;
			border: 1px solid #00d075 !important;
		}

		&_tips {
			color: #c9c9c9;
			font-size: 26rpx;
		}
	}
</style>